<template>
  <div class="scene-item" ref="scenceItem">
    <h3 class="name-top" v-if="type === 0">| {{name}} |</h3>
    <div class="scene-body" @click="clickevent">
      <img :src="url" alt="">
      <h5>{{title}}</h5>
      <h6 v-html="subTitle"></h6>
      <div class="more">
        <span>了解更多</span>
      </div>
    </div>
    <h3 class="name-bottom" v-if="type === 1">| {{name}} |</h3>
  </div>
</template>

<script>
  export default {
    name: "ScenceItem",
    props: {
      name: String,
      title: String,
      subTitle: String,
      type: Number,
      urlDefault: String,
      urlHover: String
    },
    data() {
      return {
        url: ''
      };
    },
    mounted() {
      this.url = this.urlDefault;
      this.$refs.scenceItem.addEventListener('mouseenter', (e) => {
        this.url = this.urlHover;
      });
      this.$refs.scenceItem.addEventListener('mouseleave', (e) => {
        this.url = this.urlDefault;
      });
    },
    methods: {
      clickevent(e) {
        this.$emit('item-event');
      }
    }
  };
</script>

<style lang="less">
  .scene-item {
    &:hover {
      h3 {
        color: #FF6C17;
      }
      .scene-body {
        background-color: #FF6C17;
        border-color: #FBD037;
      }
      .more {
        display: block;
      }
    }
    margin: 10px;
    h3.name-top {
      margin-bottom: 20px;
    }

    h3.name-bottom {
      margin-top: 20px;
    }

    .more {
      display: none;
      position: relative;
      bottom: -10px;
      width: 100%;
      height: 0;
      span {
        display: inline-block;
        border: 1px solid #ffffff;
        font-size: 12px;
        padding: 2px 15px;
      }
    }

    .scene-body {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 250px;
      height: 270px;
      background-color: #4960FC;
      border: 1px solid #02CCFA;
      border-radius: 10px;
      cursor: pointer;

      img {
        width: 140px;
        height: 120px;
        margin-bottom: 15px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .scene-item {
      &:hover {
        h3 {
          color: #FF6C17;
        }
        .scene-body {
          background-color: #FF6C17;
          border-color: #FBD037;
        }
        .more {
          display: none;
        }
      }
      margin: 10px;
      h3.name-top {
        margin-bottom: 20px;
      }

      h3.name-bottom {
        margin-top: 20px;
      }

      .more {
        display: none;
        position: relative;
        bottom: -10px;
        width: 100%;
        height: 0;
        span {
          display: inline-block;
          border: 1px solid #ffffff;
          font-size: 12px;
          padding: 2px 15px;
        }
      }

      .scene-body {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 160px;
        height: 190px;
        background-color: #4960FC;
        border: 1px solid #02CCFA;
        border-radius: 10px;
        cursor: pointer;
        span {
          display: block;
        }
        img {
          width: 120px;
          height: 100px;
          margin-bottom: 15px;
        }
      }
    }
  }
</style>
